<!DOCTYPE HTML>
<html>
<head>
    <title>Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="Gretong Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel='stylesheet' type='text/css'/>
    <!-- Custom CSS -->
    <link href="css/style.css" rel='stylesheet' type='text/css'/>
    <!-- Graph CSS -->
    <link href="css/font-awesome.css" rel="stylesheet">

    <!-- jQuery -->
    <link href='https://fonts.googleapis.com/css?family=Roboto:700,500,300,100italic,100,400'
          rel='stylesheet' type='text/css'/>
    <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700'
          rel='stylesheet' type='text/css'>


    <!-- lined-icons -->
    <link rel="stylesheet" href="css/icon-font.min.css" type='text/css'/>


    <!--火箭-->
    <style>
        /* 小火箭css */
        #gotop1 {
            width: 80px;
            position: fixed;
            bottom: 90px;
            cursor: pointer;
            z-index: 99998;
            right: 50%;
            margin-right: -620px;
        }
        /* 小火箭悬停特效 */

        #gotop1:hover {
            animation: rubberBand 1s;
        }

        @keyframes rubberBand {
            from {
                transform: scale3d(1, 1, 1);
            }

            30% {
                transform: scale3d(1.25, 0.75, 1);
            }

            40% {
                transform: scale3d(0.75, 1.25, 1);
            }

            50% {
                transform: scale3d(1.15, 0.85, 1);
            }

            65% {
                transform: scale3d(.95, 1.05, 1);
            }

            75% {
                transform: scale3d(1.05, .95, 1);
            }

            to {
                transform: scale3d(1, 1, 1);
            }
        }

        /* end 小火箭 */

    </style>

    <script src="js/amcharts.js"></script>
    <script src="js/serial.js"></script>
    <script src="js/light.js"></script>

    <!-- //lined-icons -->
    <script src="js/jquery-1.10.2.min.js"></script>

    <!--pie-chart--->
    <script src="js/pie-chart.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            $('#demo-pie-1').pieChart({
                barColor: '#3bb2d0',
                trackColor: '#eee',
                lineCap: 'round',
                lineWidth: 8,
                onStep: function (from, to, percent) {
                    $(this.element).find('.pie-value').text(Math.round(percent) + '%');
                }
            });

            $('#demo-pie-2').pieChart({
                barColor: '#fbb03b',
                trackColor: '#eee',
                lineCap: 'butt',
                lineWidth: 8,
                onStep: function (from, to, percent) {
                    $(this.element).find('.pie-value').text(Math.round(percent) + '%');
                }
            });

            $('#demo-pie-3').pieChart({
                barColor: '#ed6498',
                trackColor: '#eee',
                lineCap: 'square',
                lineWidth: 8,
                onStep: function (from, to, percent) {
                    $(this.element).find('.pie-value').text(Math.round(percent) + '%');
                }
            });
        });
    </script>

    <!--机器手-->
    <style>
        #screen img {
            position: absolute;
        }
        #robot-1 {
            position:absolute;
            left:20%;
            top:0px;
            z-index: 999;
            -webkit-transform: translate3d(0,0,0);

        }
        #robot-2 {
            position:absolute;
            left:20%;
            bottom:0px;
            z-index: 999;
            -webkit-transform: translate3d(0,0,0);
        }
        #robot-3 {
            position:absolute;
            left:80%;
            top:0px;
            z-index: 999;
            -webkit-transform: translate3d(0,0,0);
        }
        #robot-4 {
            position:absolute;
            left:80%;
            bottom:0px;
            z-index: 999;
            -webkit-transform: translate3d(0,0,0);
        }
        .search {
            background:#0065CB !important;
        }
    </style>
    <script src="js/base.js"></script>
    <script>
        "use strict";

        (function () {
            var scr, pointer, robots = [], transform, transformOrigin;
            // ----- Robot prototype -----
            var Robot = function (span) {
                this.span = span;
                this.armSegments = [];
                this.numSegments = 1;
                this.y = 0;
                // ---- root ----
                this.armSegments.push(
                    new ArmSegment (this, false)
                );
                // ---- html defined arms ----
                var s = span.getElementsByTagName("img");
                for (var img, i = 0; img = s[i++];) {
                    this.numSegments ++;
                    this.armSegments.push(
                        new ArmSegment (this, img)
                    );
                }
            }
            // ----- animation function -----
            Robot.prototype.anim = function () {
                // ----- tracking mouse -----
                var seg1 = this.armSegments[this.numSegments - 1];
                seg1.x += (pointer.X - seg1.x - this.span.offsetLeft) * 0.075;
                seg1.y += (pointer.Y - seg1.y - this.span.offsetTop)  * 0.075;
                // ----- inverse kinematics -----
                var i = this.numSegments - 1;
                while ( --i ) {
                    // ---- bottom up chain ----
                    var seg0 = this.armSegments[i];
                    var seg1 = this.armSegments[i + 1];
                    var a = Math.atan2(seg0.y - seg1.y, seg0.x - seg1.x);
                    seg0.x = seg1.x + Math.cos(a) * seg1.length;
                    seg0.y = seg1.y + Math.sin(a) * seg1.length;
                }
                var i = 0, seg0, seg1;
                while ( seg0 = this.armSegments[i++]) {
                    // ---- up bottom chain ----
                    if (i > 1) {
                        var seg1 = this.armSegments[i - 2];
                        var a = seg0.a = Math.atan2(seg0.y - seg1.y, seg0.x - seg1.x);
                        seg0.x = seg1.x + Math.cos(a) * seg0.length;
                        seg0.y = seg1.y + Math.sin(a) * seg0.length;
                    }
                    // ---- CSS 2D transforms animation -----
                    if (seg0.img) {
                        seg0.css[transform] = "translate("
                            + ((0.5 + seg0.x - seg0.sx) | 0) + "px,"
                            + ((0.5 + seg0.y - seg0.sy) | 0) + "px) rotate(" + seg0.a + "rad)";
                        seg0.css[transformOrigin] = ((0.5 + seg0.sx) | 0) + "px "
                            + ((0.5 + seg0.sy) | 0) + "px";
                    }
                }
            }
            // ----- Arm prototype -----
            var ArmSegment = function(parent, img) {
                this.img = img;
                //img.draggable = false;
                this.width = 0;
                this.length = 0;
                this.sx = 0;
                this.a = 0;
                this.x = 0;
                if (img) {
                    this.css    = img.style;
                    this.sy     = Math.round(img.height * 0.5);
                    this.length = img.width - this.sy;
                    this.sx     = img.width;
                }
                this.y = parent.y;
                parent.y += this.length;
            }
            // ----- main loop -----
            var run = function () {
                // ---- robots ----
                for (var r, i = 0; r = robots[i++];) {
                    r.anim();
                }
                // ---- next frame ----
                requestAnimFrame(run);
            }
            // ----- initialization -----
            var init = function () {
                // ---- screen ----
                scr = new ge1doot.Screen({
                    container: "screen"
                });
                /* ---- pointer ---- */
                pointer = new ge1doot.Pointer({});
                // ----- CSS3 2D transforms browsers prefix detection -----
                var t = ["transform", "msTransform", "MozTransform", "WebkitTransform", "OTransform"];
                for (var test, i = 0; test = t[i++];) {
                    if (typeof document.body.style[test] != "undefined") {
                        transform = test;
                        transformOrigin = test + "Origin";
                        break;
                    }
                }
                // ---- instanciate robot arms ----
                var s = document.getElementById("screen").getElementsByTagName("span");
                for (var r, i = 0; r = s[i++];) {
                    robots.push(
                        new Robot (r)
                    );
                }
                pointer.X = scr.width / 2;
                pointer.Y = scr.height / 2;
                // ----- start engine -----
                if (transform) run();
            }
            return {
                // ---- launch script -----
                load : function (params) {
                    window.addEventListener('load', function () {
                        init();
                    }, false);
                }
            }
        })().load();
    </script>



</head>
<body>
        <!--机器手-->
        <div id="screen">
		<span id="robot-1">
			<img src="images/arm01.png" alt="">
			<img src="images/arm02.png" alt="">
			<img src="images/arm03.png" alt="">
			<img src="images/arm04.png" alt="">
		</span>
    <span id="robot-2">
			<img src="images/arm01.png" alt="">
			<img src="images/arm02.png" alt="">
			<img src="images/arm03.png" alt="">
			<img src="images/arm04.png" alt="">
		</span>
    <span id="robot-3">
			<img src="images/arm01.png" alt="">
			<img src="images/arm02.png" alt="">
			<img src="images/arm03.png" alt="">
			<img src="images/arm04.png" alt="">
		</span>
    <span id="robot-4">
			<img src="images/arm01.png" alt="">
			<img src="images/arm02.png" alt="">
			<img src="images/arm03.png" alt="">
			<img src="images/arm04.png" alt="">
		</span>
</div>


<!-- 右侧小火箭图标返回顶部 -->
<div id="shangxia2">
		<span id="gotop1">
			<img src="/static/plugins/assert/images/huojian.svg">
		</span>
</div>


<!-- js -->
<script src="js/jquery.min.js"></script>
<script src="js/TweenMax.min.js"></script>
<script src="js/ScrollToPlugin.min.js"></script>

<script>

    /* 选择你喜欢的速度类型，复制下面的某段代码即可。不明处请咨询：qpjk.cc */

    $(function() {

// 默认速度
        $("#gotop6").click(function() {
            TweenMax.to(window, 1, {scrollTo:0});
        });


// 弹跳球式滚动底部 .box2是要滚动地方的id或者锚点
        $("#gotop5").click(function() {
            TweenMax.to(window, 2, {scrollTo:".box2", ease:Bounce.easeOut});
        });


// 返回顶部，绑定gotop1图标和gotop2文字事件
        $("#gotop1,#gotop2").click(function(e) {
            TweenMax.to(window, 1.5, {scrollTo:0, ease: Expo.easeInOut});
            var huojian = new TimelineLite();
            huojian.to("#gotop1", 1, {rotationY:720, scale:0.6, y:"+=40", ease:  Power4.easeOut})
                .to("#gotop1", 1, {y:-1000, opacity:0, ease:  Power4.easeOut}, 0.6)
                .to("#gotop1", 1, {y:0, rotationY:0, opacity:1, scale:1, ease: Expo.easeOut, clearProps: "all"}, "1.4");
        });


// 以1秒慢快慢的速度滚动顶部
        $("#gotop3").click(function() {
            TweenMax.to(window, 1, {scrollTo:0, ease:Expo.easeInOut});
        });

// 以1.5秒快慢快的速度滚动顶部
        $("#gotop4").click(function() {
            TweenMax.to(window, 1.5, {scrollTo:0, ease:SlowMo.ease.config(0.7, 0.7, false)});
        });


    });

</script>















<div class="page-container">
    <!--/content-inner-->
    <div class="left-content">
        <div class="inner-content">
            <!-- header-starts -->
            <div class="header-section">
                <!-- top_bg -->
                <div class="top_bg">

                    <div class="header_top">
                        <div class="top_right" style="margin-top: 10px">
                            <ul>
                                <li><div><a href="http://lh.brain111.com/zt/jsbyy/#GW12-GZZK-YY-5">帮助</a></div></li>
                                |
                                <li>
                                    <div>联系</div>
                                </li>
                                |
                                <li><div><a href="/logout.do">安全退出</a></div></li>
                            </ul>
                        </div>
                        <div class="top_left">
                            <!--<h2><span></span> Call us : 10086</h2>-->
                            <iframe src="http://tianqi.5ikfc.com:90/plugin-code/?style=1&dy=3&cl=ffffff&th=ff0000&tl=0033cc"
                                    allowTransparency="true" frameborder="0" scrolling="no" width="680"
                                    height="50" id="weather_frame"></iframe>
                        </div>
                        <div class="clearfix"></div>
                    </div>

                </div>
                <div class="clearfix"></div>
                <!-- /top_bg -->
            </div>
            <!-- //header-ends -->

            <!--content-->
            <div class="content">
                <!--<div class="monthly-grid">
                    <div class="panel panel-widget">
                        <div id="main" class="panel-title">
                        </div>
                        &lt;!&ndash;<div id="main" class="panel-body">
                            &lt;!&ndash; status &ndash;&gt;
                            <div class="contain">
                                <div class="gantt"></div>
                            </div>
                            &lt;!&ndash; status &ndash;&gt;
                        </div>&ndash;&gt;
                        <div class="clearfix"></div>
                    </div>
                </div>-->
                <!--//area-->
                <div class="col-md-5 skil">
                    <div class="content-top-1">
                        <div class="col-md-6 top-content">
                            <h5>任务数量</h5>
                            <label>8761</label>
                        </div>
                        <div class="col-md-6 top-content1">
                            <div id="demo-pie-1" class="pie-title-center"
                                 data-percent="25"><span
                                    class="pie-value">25%</span></div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="content-top-1">
                        <div class="col-md-6 top-content">
                            <h5>目标数量</h5>
                            <label>6295</label>
                        </div>
                        <div class="col-md-6 top-content1">
                            <div id="demo-pie-2" class="pie-title-center"
                                 data-percent="50"><span
                                    class="pie-value">50%</span></div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="content-top-1">
                        <div class="col-md-6 top-content">
                            <h5>目标预期</h5>
                            <label>3401</label>
                        </div>
                        <div class="col-md-6 top-content1">
                            <div id="demo-pie-3" class="pie-title-center"
                                 data-percent="75"><span
                                    class="pie-value">75%</span></div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="col-md-7 mid-content-top">
                    <div class="middle-content">
                        <h3>教育展示
                        </h3>
                        <!-- start content_slider -->
                        <div id="owl-demo" class="owl-carousel text-center">
                            <div class="item">
                                <img class="lazyOwl img-responsive"
                                     data-src="images/na.jpg" alt="name">
                            </div>
                            <div class="item">
                                <img class="lazyOwl img-responsive"
                                     data-src="images/na1.jpg" alt="name">
                            </div>
                            <div class="item">
                                <img class="lazyOwl img-responsive"
                                     data-src="images/na2.jpg" alt="name">
                            </div>
                            <div class="item">
                                <img class="lazyOwl img-responsive"
                                     data-src="images/na.jpg" alt="name">
                            </div>
                            <div class="item">
                                <img class="lazyOwl img-responsive"
                                     data-src="images/na1.jpg" alt="name">
                            </div>
                            <div class="item">
                                <img class="lazyOwl img-responsive"
                                     data-src="images/na2.jpg" alt="name">
                            </div>
                            <div class="item">
                                <img class="lazyOwl img-responsive"
                                     data-src="images/na.jpg" alt="name">
                            </div>

                        </div>
                    </div>
                    <!--//sreen-gallery-cursual---->
                    <!-- requried-jsfiles-for owl -->
                    <link href="css/owl.carousel.css" rel="stylesheet">
                    <script src="js/owl.carousel.js"></script>
                    <script>
                        $(document).ready(function () {
                            $("#owl-demo").owlCarousel({
                                items: 3,
                                lazyLoad: true,
                                autoPlay: true,
                                pagination: true,
                                nav: true,
                            });
                        });
                    </script>
                    <!-- //requried-jsfiles-for owl -->
                </div>
                <div class="clearfix"></div>

                <div class="content-top">
                    <div class="col-md-6 content-top-lft">
                        <div class="panel panel-widget">
                            <div class="panel-title">
                                数据实时更新
                            </div>
                            <div class="panel-body">
                                <div class="demo-container">
                                    <div id="placeholder"
                                         class="demo-placeholder"></div>
                                </div>
                                <p>每隔: <input
                                        id="updateInterval" type="text" value=""
                                        style="text-align: right; width:5em">
                                    s更新</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6 content-top-2">
                        <!---start-chart---->
                        <!----->
                        <div class="content-graph">
                            <div class="content-color">
                                <div class="content-ch"><p><i></i>admin </p>
                                    <span>72%</span>
                                    <div class="clearfix"></div>
                                </div>
                                <div class="content-ch1"><p><i></i>will</p>
                                    <span> 34%</span>
                                    <div class="clearfix"></div>
                                </div>
                            </div>
                            <!--graph-->
                            <link rel="stylesheet" href="css/graph.css">
                            <!--//graph-->
                            <script src="js/jquery.flot.js"></script>
                            <script>
                                $(document).ready(function () {

                                    // Graph Data ##############################################
                                    var graphData = [{
                                        // Visits
                                        data: [[6, 1300], [7, 1600], [8, 1900], [9, 2100], [10, 2500], [11, 2200], [12, 500], [13, 450], [14, 860], [15, 2000]],
                                        color: '#999999'
                                    }, {
                                        // Returning Visits
                                        data: [[6, 1500], [7, 780], [8, 1540], [9, 1600], [10, 1000], [11, 2200], [12, 300], [13, 850], [14, 830], [15, 1000]],
                                        color: '#999999',
                                        points: {
                                            radius: 4,
                                            fillColor: '#7f8c8d'
                                        }
                                    }
                                    ];

                                    // Lines Graph #############################################
                                    $.plot($('#graph-lines'), graphData, {
                                        series: {
                                            points: {
                                                show: true,
                                                radius: 5
                                            },
                                            lines: {
                                                show: true
                                            },
                                            shadowSize: 0
                                        },
                                        grid: {
                                            color: '#7f8c8d',
                                            borderColor: 'transparent',
                                            borderWidth: 20,
                                            hoverable: true
                                        },
                                        xaxis: {
                                            tickColor: 'transparent',
                                            tickDecimals: 2
                                        },
                                        yaxis: {
                                            tickSize: 1000
                                        }
                                    });

                                    // Bars Graph ##############################################
                                    $.plot($('#graph-bars'), graphData, {
                                        series: {
                                            bars: {
                                                show: true,
                                                barWidth: .9,
                                                align: 'center'
                                            },
                                            shadowSize: 0
                                        },
                                        grid: {
                                            color: '#7f8c8d',
                                            borderColor: 'transparent',
                                            borderWidth: 20,
                                            hoverable: true
                                        },
                                        xaxis: {
                                            tickColor: 'transparent',
                                            tickDecimals: 2
                                        },
                                        yaxis: {
                                            tickSize: 1000
                                        }
                                    });

                                    // Graph Toggle ############################################
                                    $('#graph-bars').hide();

                                    $('#lines').on('click', function (e) {
                                        $('#bars').removeClass('active');
                                        $('#graph-bars').fadeOut();
                                        $(this).addClass('active');
                                        $('#graph-lines').fadeIn();
                                        e.preventDefault();
                                    });

                                    $('#bars').on('click', function (e) {
                                        $('#lines').removeClass('active');
                                        $('#graph-lines').fadeOut();
                                        $(this).addClass('active');
                                        $('#graph-bars').fadeIn().removeClass('hidden');
                                        e.preventDefault();
                                    });

                                    // Tooltip #################################################
                                    function showTooltip(x, y, contents) {
                                        $('<div id="tooltip">' + contents + '</div>').css({
                                            top: y - 16,
                                            left: x + 20
                                        }).appendTo('body').fadeIn();
                                    }

                                    var previousPoint = null;

                                    $('#graph-lines, #graph-bars').bind('plothover', function (event, pos, item) {
                                        if (item) {
                                            if (previousPoint != item.dataIndex) {
                                                previousPoint = item.dataIndex;
                                                $('#tooltip').remove();
                                                var x = item.datapoint[0],
                                                    y = item.datapoint[1];
                                                showTooltip(item.pageX, item.pageY, y + ' visitors at ' + x + '.00h');
                                            }
                                        } else {
                                            $('#tooltip').remove();
                                            previousPoint = null;
                                        }
                                    });

                                });
                            </script>
                            <div class="graph-container">

                                <div id="graph-lines" style="padding: 0px;">
                                    <canvas class="flot-base" width="883"
                                            height="528"
                                            style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 883px; height: 528px;"></canvas>
                                    <div class="flot-text"
                                         style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; font-size: smaller; color: rgb(84, 84, 84);">
                                        <div class="flot-x-axis flot-x1-axis xAxis x1Axis"
                                             style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;">
                                            <div class="flot-tick-label tickLabel"
                                                 style="position: absolute; max-width: 88px; top: 486px; left: 49px; text-align: center;">
                                                6.00
                                            </div>
                                            <div class="flot-tick-label tickLabel"
                                                 style="position: absolute; max-width: 88px; top: 486px; left: 138px; text-align: center;">
                                                7.00
                                            </div>
                                            <div class="flot-tick-label tickLabel"
                                                 style="position: absolute; max-width: 88px; top: 486px; left: 225px; text-align: center;">
                                                8.00
                                            </div>
                                            <div class="flot-tick-label tickLabel"
                                                 style="position: absolute; max-width: 88px; top: 486px; left: 314px; text-align: center;">
                                                9.00
                                            </div>
                                            <div class="flot-tick-label tickLabel"
                                                 style="position: absolute; max-width: 88px; top: 486px; left: 398px; text-align: center;">
                                                10.00
                                            </div>
                                            <div class="flot-tick-label tickLabel"
                                                 style="position: absolute; max-width: 88px; top: 486px; left: 489px; text-align: center;">
                                                11.00
                                            </div>
                                            <div class="flot-tick-label tickLabel"
                                                 style="position: absolute; max-width: 88px; top: 486px; left: 575px; text-align: center;">
                                                12.00
                                            </div>
                                            <div class="flot-tick-label tickLabel"
                                                 style="position: absolute; max-width: 88px; top: 486px; left: 664px; text-align: center;">
                                                13.00
                                            </div>
                                            <div class="flot-tick-label tickLabel"
                                                 style="position: absolute; max-width: 88px; top: 486px; left: 752px; text-align: center;">
                                                14.00
                                            </div>
                                            <div class="flot-tick-label tickLabel"
                                                 style="position: absolute; max-width: 88px; top: 486px; left: 840px; text-align: center;">
                                                15.00
                                            </div>
                                        </div>
                                        <div class="flot-y-axis flot-y1-axis yAxis y1Axis"
                                             style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;">
                                            <div class="flot-tick-label tickLabel"
                                                 style="position: absolute; top: 470px; left: 51px; text-align: right;">
                                                0
                                            </div>
                                            <div class="flot-tick-label tickLabel"
                                                 style="position: absolute; top: 316px; left: 23px; text-align: right;">
                                                1000
                                            </div>
                                            <div class="flot-tick-label tickLabel"
                                                 style="position: absolute; top: 163px; left: 20px; text-align: right;">
                                                2000
                                            </div>
                                            <div class="flot-tick-label tickLabel"
                                                 style="position: absolute; top: 9px; left: 20px; text-align: right;">
                                                3000
                                            </div>
                                        </div>
                                    </div>
                                    <canvas class="flot-overlay" width="883"
                                            height="528"
                                            style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 883px; height: 528px;"></canvas>
                                </div>
                                <div id="graph-bars"
                                     style="padding: 0px; display: none;">
                                    <canvas class="flot-base" width="883"
                                            height="528"
                                            style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 883px; height: 528px;"></canvas>
                                    <div class="flot-text"
                                         style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; font-size: smaller; color: rgb(84, 84, 84);">
                                        <div class="flot-x-axis flot-x1-axis xAxis x1Axis"
                                             style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;">
                                            <div class="flot-tick-label tickLabel"
                                                 style="position: absolute; max-width: 73px; top: 486px; left: 85px; text-align: center;">
                                                6.00
                                            </div>
                                            <div class="flot-tick-label tickLabel"
                                                 style="position: absolute; max-width: 73px; top: 486px; left: 166px; text-align: center;">
                                                7.00
                                            </div>
                                            <div class="flot-tick-label tickLabel"
                                                 style="position: absolute; max-width: 73px; top: 486px; left: 245px; text-align: center;">
                                                8.00
                                            </div>
                                            <div class="flot-tick-label tickLabel"
                                                 style="position: absolute; max-width: 73px; top: 486px; left: 326px; text-align: center;">
                                                9.00
                                            </div>
                                            <div class="flot-tick-label tickLabel"
                                                 style="position: absolute; max-width: 73px; top: 486px; left: 402px; text-align: center;">
                                                10.00
                                            </div>
                                            <div class="flot-tick-label tickLabel"
                                                 style="position: absolute; max-width: 73px; top: 486px; left: 485px; text-align: center;">
                                                11.00
                                            </div>
                                            <div class="flot-tick-label tickLabel"
                                                 style="position: absolute; max-width: 73px; top: 486px; left: 563px; text-align: center;">
                                                12.00
                                            </div>
                                            <div class="flot-tick-label tickLabel"
                                                 style="position: absolute; max-width: 73px; top: 486px; left: 644px; text-align: center;">
                                                13.00
                                            </div>
                                            <div class="flot-tick-label tickLabel"
                                                 style="position: absolute; max-width: 73px; top: 486px; left: 724px; text-align: center;">
                                                14.00
                                            </div>
                                            <div class="flot-tick-label tickLabel"
                                                 style="position: absolute; max-width: 73px; top: 486px; left: 804px; text-align: center;">
                                                15.00
                                            </div>
                                        </div>
                                        <div class="flot-y-axis flot-y1-axis yAxis y1Axis"
                                             style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;">
                                            <div class="flot-tick-label tickLabel"
                                                 style="position: absolute; top: 470px; left: 51px; text-align: right;">
                                                0
                                            </div>
                                            <div class="flot-tick-label tickLabel"
                                                 style="position: absolute; top: 316px; left: 23px; text-align: right;">
                                                1000
                                            </div>
                                            <div class="flot-tick-label tickLabel"
                                                 style="position: absolute; top: 163px; left: 20px; text-align: right;">
                                                2000
                                            </div>
                                            <div class="flot-tick-label tickLabel"
                                                 style="position: absolute; top: 9px; left: 20px; text-align: right;">
                                                3000
                                            </div>
                                        </div>
                                    </div>
                                    <canvas class="flot-overlay" width="883"
                                            height="528"
                                            style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 883px; height: 528px;"></canvas>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <!--area-->
                <div class="area">
                        <div class="col-md-6 chrt-two area">
                            <h3 class="sub-tittle">就业峰值</h3>
                            <div style="area">
                                <canvas id="canvas" style="width:100%;height:100%"></canvas>
                            </div>
                            <button id="randomizeData">Randomize Data</button>
                            <script>
                                var randomScalingFactor = function() {
                                    return Math.round(Math.random() * 100 * (Math.random() > 0.5 ? -1 : 1));
                                };
                                var randomColor = function(opacity) {
                                    return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')';
                                };

                                var lineChartData = {
                                    labels: ["January", "February", "March", "April", "May", "June", "July"],
                                    datasets: [{
                                        label: "Java就业",
                                        data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
                                        yAxisID: "y-axis-1",
                                    }, {
                                        label: "Python就业",
                                        data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
                                        yAxisID: "y-axis-2"
                                    }]
                                };

                                $.each(lineChartData.datasets, function(i, dataset) {
                                    dataset.borderColor = randomColor(0.4);
                                    dataset.backgroundColor = randomColor(1);
                                    dataset.pointBorderColor = randomColor(0.7);
                                    dataset.pointBackgroundColor = randomColor(0.5);
                                    dataset.pointBorderWidth = 1;
                                });

                                console.log(lineChartData);

                                window.onload = function() {
                                    var ctx = document.getElementById("canvas").getContext("2d");
                                    window.myLine = Chart.Line(ctx, {
                                        data: lineChartData,
                                        options: {

                                            hoverMode: 'label',
                                            stacked: false,
                                            scales: {
                                                xAxes: [{
                                                    display: true,
                                                    gridLines: {
                                                        offsetGridLines: false
                                                    }
                                                }],
                                                yAxes: [{
                                                    type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                                                    display: true,
                                                    position: "left",
                                                    id: "y-axis-1",
                                                }, {
                                                    type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
                                                    display: true,
                                                    position: "right",
                                                    id: "y-axis-2",

                                                    // grid line settings
                                                    gridLines: {
                                                        drawOnChartArea: false, // only want the grid lines for one axis to show up
                                                    },
                                                }],
                                            }
                                        }
                                    });
                                };

                                $('#randomizeData').click(function() {
                                    lineChartData.datasets[0].data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];

                                    lineChartData.datasets[1].data = [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()];

                                    window.myLine.update();
                                });
                            </script>
                            <script src="js/Chart.js"></script>
                        </div>
                        <div class="col-md-6 chrt-three">
                            <h3 class="sub-tittle"></h3>
                            <div id="chartdiv1"></div>
                            <script>
                                var chart = AmCharts.makeChart("chartdiv1", {
                                    "type": "serial",
                                    "theme": "light",
                                    "rotate": true,
                                    "marginBottom": 50,
                                    "dataProvider": [{
                                        "age": "85+",
                                        "male": -0.1,
                                        "female": 0.3
                                    }, {
                                        "age": "80-54",
                                        "male": -0.2,
                                        "female": 0.3
                                    }, {
                                        "age": "75-79",
                                        "male": -0.3,
                                        "female": 0.6
                                    }, {
                                        "age": "70-74",
                                        "male": -0.5,
                                        "female": 0.8
                                    }, {
                                        "age": "65-69",
                                        "male": -0.8,
                                        "female": 1.0
                                    }, {
                                        "age": "60-64",
                                        "male": -1.1,
                                        "female": 1.3
                                    }, {
                                        "age": "55-59",
                                        "male": -1.7,
                                        "female": 1.9
                                    }, {
                                        "age": "50-54",
                                        "male": -2.2,
                                        "female": 2.5
                                    }, {
                                        "age": "45-49",
                                        "male": -2.8,
                                        "female": 3.0
                                    }, {
                                        "age": "40-44",
                                        "male": -3.4,
                                        "female": 3.6
                                    }, {
                                        "age": "35-39",
                                        "male": -4.2,
                                        "female": 4.1
                                    }, {
                                        "age": "30-34",
                                        "male": -5.2,
                                        "female": 4.8
                                    }, {
                                        "age": "25-29",
                                        "male": -5.6,
                                        "female": 5.1
                                    }, {
                                        "age": "20-24",
                                        "male": -5.1,
                                        "female": 5.1
                                    }, {
                                        "age": "15-19",
                                        "male": -3.8,
                                        "female": 3.8
                                    }, {
                                        "age": "10-14",
                                        "male": -3.2,
                                        "female": 3.4
                                    }, {
                                        "age": "5-9",
                                        "male": -4.4,
                                        "female": 4.1
                                    }, {
                                        "age": "0-4",
                                        "male": -5.0,
                                        "female": 4.8
                                    }],
                                    "startDuration": 1,
                                    "graphs": [{
                                        "fillAlphas": 0.8,
                                        "lineAlpha": 0.2,
                                        "type": "column",
                                        "valueField": "male",
                                        "title": "Male",
                                        "labelText": "[[value]]",
                                        "clustered": false,
                                        "labelFunction": function(item) {
                                            return Math.abs(item.values.value);
                                        },
                                        "balloonFunction": function(item) {
                                            return item.category + ": " + Math.abs(item.values.value) + "%";
                                        }
                                    }, {
                                        "fillAlphas": 0.8,
                                        "lineAlpha": 0.2,
                                        "type": "column",
                                        "valueField": "female",
                                        "title": "Female",
                                        "labelText": "[[value]]",
                                        "clustered": false,
                                        "labelFunction": function(item) {
                                            return Math.abs(item.values.value);
                                        },
                                        "balloonFunction": function(item) {
                                            return item.category + ": " + Math.abs(item.values.value) + "%";
                                        }
                                    }],
                                    "categoryField": "age",
                                    "categoryAxis": {
                                        "gridPosition": "start",
                                        "gridAlpha": 0.2,
                                        "axisAlpha": 0
                                    },
                                    "valueAxes": [{
                                        "gridAlpha": 0,
                                        "ignoreAxisWidth": true,
                                        "labelFunction": function(value) {
                                            return Math.abs(value) + '%';
                                        },
                                        "guides": [{
                                            "value": 0,
                                            "lineAlpha": 0.2
                                        }]
                                    }],
                                    "balloon": {
                                        "fixedPosition": true
                                    },
                                    "chartCursor": {
                                        "valueBalloonsEnabled": false,
                                        "cursorAlpha": 0.05,
                                        "fullWidth": true
                                    },
                                    "allLabels": [{
                                        "text": "Male",
                                        "x": "28%",
                                        "y": "97%",
                                        "bold": true,
                                        "align": "middle"
                                    }, {
                                        "text": "Female",
                                        "x": "75%",
                                        "y": "97%",
                                        "bold": true,
                                        "align": "middle"
                                    }],
                                    "export": {
                                        "enabled": true
                                    }

                                });
                            </script>
                        </div>
                        <div class="clearfix"></div>
                    <div class="clearfix"></div>
                </div>
                <!--//area-->
            </div>
            <!--content-->
        </div>
    </div>
    <!--//content-inner-->
    <!--/sidebar-menu-->
    <div class="sidebar-menu">
        <header class="logo1">
            <a href="javascript:;" class="sidebar-icon"> <span
                    class="fa fa-bars"></span>
            </a>
        </header>
        <div style="border-top:1px ridge rgba(255, 255, 255, 0.15)"></div>
        <div class="menu">
            <ul id="menu">
                <div class="accordion-group">
                    <li><a href="/indexBoostrap.do"><i
                            class="fa fa-tachometer"></i>
                        <span>首页</span></a>
                    </li>
                    <li id="menu-academico">
                        <a href="javascript:;"><i class="fa fa-table">
                        </i>
                            <span>报表</span> <span class="fa fa-angle-right"
                                                  style="float: right"></span>
                        </a>
                        <ul id="menu-academico-sub">
                            <li id="menu-academico-avaliacoes">
                                <a href="chart.html">正式学员报表</a>
                            </li>
                        </ul>
                    </li>
                </div>
                <li id="menu-academico">
                    <a href="javascript:;"><i class="fa fa-file-text-o"></i>
                        <span>地图</span> <span class="fa fa-angle-right"
                                              style="float: right"></span></a>
                    <ul id="menu-academico-sub">
                        <li id="menu-academico-avaliacoes">
                            <a href="map.html">地图展示</a>
                        </li>
                    </ul>
                </li>

                <li style="background-color: #5bc0de">
                    <a href="javascript:;">
                        <i class="lnr lnr-pencil"></i>
                        <span>客户服务 <span class="fa fa-angle-right"
                                         style="float: right"></span></span>
                    </a>
                    <ul id="menu-academico-sub">
                        <li id="menu-academico-avaliacoes">
                            <a href="potentialstudent.html">潜在学员管理</a>
                        </li>
                        <li id="menu-academico-avaliacoes">
                            <a href="studentTrack.html">学员跟踪</a>
                        </li>
                        <li id="menu-academico-avaliacoes">
                            <a href="#">潜在客户池</a>
                        </li>
                        <li id="menu-academico-avaliacoes">
                            <a href="movethehistory.html">移交历史</a>
                        </li>
                        <li id="menu-academico-avaliacoes">
                            <a href="client.html">大客户</a>
                        </li>
                        <li id="menu-academico-avaliacoes">
                            <a href="contact.html">学校联系人</a>
                        </li>
                        <li id="menu-academico-avaliacoes">
                            <a href="school.html">学校管理</a>
                        </li>
                        <li id="menu-academico-avaliacoes">
                            <a href="examination.html">考试管理</a>
                        </li>
                    </ul>
                </li>

                <li id="menu-academico">
                    <a href="javascript:;"><i class="fa fa-file-text-o">
                    </i> <span>学员管理</span> <span class="fa fa-angle-right"
                                                 style="float: right"></span></a>
                    <ul id="menu-academico-sub">
                        <li id="menu-academico-avaliacoes">
                            <a href="studentmanagement.html">正式学员管理</a>
                        </li>
                        <li id="menu-academico-avaliacoes">
                            <a href="studentShift.html">学员升班留级</a>
                        </li>
                        <li id="menu-academico-avaliacoes">
                            <a href="gathering.html">收款管理</a>
                        </li>
                        <li id="menu-academico-avaliacoes">
                            <a href="studentmanagement1.html">学员流失</a>
                        </li>
                    </ul>
                </li>

                <li id="menu-academico">
                    <a href="javascript:;"><i class="lnr lnr-book"></i>
                        <span>教务管理</span> <span class="fa fa-angle-right"
                                                style="float: right"></span></a>
                    <ul id="menu-academico-sub">
                        <li id="menu-academico-avaliacoes">
                            <a href="grade.html">班级管理</a>
                        </li>
                        <li id="menu-academico-avaliacoes">
                            <a href="curriculum.html">课程表</a>
                        </li>
                        <li id="menu-academico-avaliacoes">
                            <a href="classroom.html">教室管理</a>
                        </li>
                        <li id="menu-academico-avaliacoes">
                            <a href="spending.html">支出管理</a>
                        </li>
                    </ul>
                </li>
                </li>

                <li>
                    <a href="javascript:;"><i class="lnr lnr-envelope">
                    </i> <span>日常办公</span><span
                            class="fa fa-angle-right"
                            style="float: right"></span></a>
                    <ul id="menu-academico-sub">
                        <li id="menu-academico-avaliacoes">
                            <a href="salary.html">工资管理</a>
                        </li>
                        <li id="menu-academico-avaliacoes">
                            <a href="attendance.html">考勤管理</a>
                        </li>
                        <li id="menu-academico-avaliacoes">
                            <a href="userInfo.html">学贷申请审核</a>
                        </li>
                    </ul>
                </li>

                <li>
                    <a href="javascript:;"><i class="lnr lnr-pie-chart"></i>
                        <span>系统管理</span><span class="fa fa-angle-right"
                                               style="float: right"></span></a>
                    <ul id="menu-academico-sub">
                        <li id="menu-academico-avaliacoes">
                            <a href="employee.html">员工管理</a>
                        </li>
                        <li id="menu-academico-avaliacoes">
                            <a href="department.html">部门管理</a>
                        </li>
                        <li id="menu-academico-avaliacoes">
                            <a href="permission.html">系统权限管理</a>
                        </li>
                        <li id="menu-academico-avaliacoes">
                            <a href="role.html">系统角色管理</a>
                        </li>
                        <li id="menu-academico-avaliacoes">
                            <a href="systemDictionary.html">数据字典</a>
                        </li>
                        <li id="menu-academico-avaliacoes">
                            <a href="systemLog.html">系统日志</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:;"><i class="lnr lnr-envelope">
                    </i> <span>趣味乐园</span><span
                            class="fa fa-angle-right"
                            style="float: right"></span></a>
                    <ul id="menu-academico-sub">
                        <li id="menu-academico-avaliacoes">
                            <a href="play.html">欢乐大转盘</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="clearfix"></div>
</div>
<script>
    var toggle = true;

    $(".sidebar-icon").click(function () {
        if (toggle) {
            $(".page-container").addClass("sidebar-collapsed").removeClass("sidebar-collapsed-back");
            $("#menu span").css({"position": "absolute"});
        }
        else {
            $(".page-container").removeClass("sidebar-collapsed").addClass("sidebar-collapsed-back");
            setTimeout(function () {
                $("#menu span").css({"position": "relative"});
            }, 400);
        }

        toggle = !toggle;
    });
</script>
<!--js -->
<script src="js/jquery.nicescroll.js"></script>
<script src="js/scripts.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- /Bootstrap Core JavaScript -->
<!-- real-time -->
<script language="javascript" type="text/javascript"
        src="js/jquery.flot.js"></script>
<script type="text/javascript">

    $(function () {

        // We use an inline data source in the example, usually data would
        // be fetched from a server

        var data = [],
            totalPoints = 300;

        function getRandomData() {

            if (data.length > 0)
                data = data.slice(1);

            // Do a random walk

            while (data.length < totalPoints) {

                var prev = data.length > 0 ? data[data.length - 1] : 50,
                    y = prev + Math.random() * 10 - 5;

                if (y < 0) {
                    y = 0;
                } else if (y > 100) {
                    y = 100;
                }

                data.push(y);
            }

            // Zip the generated y values with the x values

            var res = [];
            for (var i = 0; i < data.length; ++i) {
                res.push([i, data[i]])
            }

            return res;
        }

        // Set up the control widget

        var updateInterval = 30;
        $("#updateInterval").val(updateInterval).change(function () {
            var v = $(this).val();
            if (v && !isNaN(+v)) {
                updateInterval = +v;
                if (updateInterval < 1) {
                    updateInterval = 1;
                } else if (updateInterval > 2000) {
                    updateInterval = 2000;
                }
                $(this).val("" + updateInterval);
            }
        });

        var plot = $.plot("#placeholder", [getRandomData()], {
            series: {
                shadowSize: 0	// Drawing is faster without shadows
            },
            yaxis: {
                min: 0,
                max: 100
            },
            xaxis: {
                show: false
            }
        });

        function update() {

            plot.setData([getRandomData()]);

            // Since the axes don't change, we don't need to call plot.setupGrid()

            plot.draw();
            setTimeout(update, updateInterval);
        }

        update();

        // Add the Flot version string to the footer

        $("#footer").prepend("Flot " + $.plot.version + " &ndash; ");
    });

</script>
<!-- /real-time -->
<script src="js/jquery.fn.gantt.js"></script>
<!--<script>

    $(function () {

        "use strict";

        $(".gantt").gantt({
            source: [{
                name: "Sprint 0",
                desc: "Analysis",
                values: [{
                    from: "/Date(1320192000000)/",
                    to: "/Date(1322401600000)/",
                    label: "Requirement Gathering",
                    customClass: "ganttRed"
                }]
            }, {
                name: " ",
                desc: "Scoping",
                values: [{
                    from: "/Date(1322611200000)/",
                    to: "/Date(1323302400000)/",
                    label: "Scoping",
                    customClass: "ganttRed"
                }]
            }, {
                name: "Sprint 1",
                desc: "Development",
                values: [{
                    from: "/Date(1323802400000)/",
                    to: "/Date(1325685200000)/",
                    label: "Development",
                    customClass: "ganttGreen"
                }]
            }, {
                name: " ",
                desc: "Showcasing",
                values: [{
                    from: "/Date(1325685200000)/",
                    to: "/Date(1325695200000)/",
                    label: "Showcasing",
                    customClass: "ganttBlue"
                }]
            }, {
                name: "Sprint 2",
                desc: "Development",
                values: [{
                    from: "/Date(1326785200000)/",
                    to: "/Date(1325785200000)/",
                    label: "Development",
                    customClass: "ganttGreen"
                }]
            }, {
                name: " ",
                desc: "Showcasing",
                values: [{
                    from: "/Date(1328785200000)/",
                    to: "/Date(1328905200000)/",
                    label: "Showcasing",
                    customClass: "ganttBlue"
                }]
            }, {
                name: "Release Stage",
                desc: "Training",
                values: [{
                    from: "/Date(1330011200000)/",
                    to: "/Date(1336611200000)/",
                    label: "Training",
                    customClass: "ganttOrange"
                }]
            }, {
                name: " ",
                desc: "Deployment",
                values: [{
                    from: "/Date(1336611200000)/",
                    to: "/Date(1338711200000)/",
                    label: "Deployment",
                    customClass: "ganttOrange"
                }]
            }, {
                name: " ",
                desc: "Warranty Period",
                values: [{
                    from: "/Date(1336611200000)/",
                    to: "/Date(1349711200000)/",
                    label: "Warranty Period",
                    customClass: "ganttOrange"
                }]
            }],
            navigate: "scroll",
            scale: "weeks",
            maxScale: "months",
            minScale: "days",
            itemsPerPage: 10,
            onItemClick: function (data) {
                alert("Item clicked - show some details");
            },
            onAddClick: function (dt, rowId) {
                alert("Empty space clicked - add an item!");
            },
            onRender: function () {
                if (window.console && typeof console.log === "function") {
                    console.log("chart rendered");
                }
            }
        });

        $(".gantt").popover({
            selector: ".bar",
            title: "I'm a popover",
            content: "And I'm the content of said popover.",
            trigger: "hover"
        });

        prettyPrint();

    });

</script>-->
<script src="js/menu_jquery.js"></script>
</body>
</html>